<template>
    <div class="movieview">
        <div class="main">
           <el-row>
                <el-col :span="20">
                    <div class="grid-content bg-purple">
                        <h1>{{moviedetails.title}}</h1>
                        <div class="player">
                        <el-image
                        style="width: 95%; height: 450px;padding-top: 17px"
                        :src="bigurl"></el-image>
                        </div>

                        <div class="toolbar">
                            <h3>此电影平均评分</h3>
                            <el-rate
                            v-model="moviedetails.rating"
                            disabled
                            show-score
                            text-color="#ff9900"
                            score-template="{value}">
                            </el-rate>

                            <br>

                            <el-button type="success" @click="submitRate">提交您的评分</el-button>
                            <el-rate
                            v-model="value"
                            show-score
                            text-color="#ff9900"
                            score-template="{value}">
                            </el-rate>
                            
                            <el-button type="success">收藏</el-button>
                        </div>

                        <div class="introduce">
                            <h2>简介</h2>
                            <span>{{moviedetails.introduction}}</span>
                        </div>
                
                    </div>
                </el-col>

                <el-col :span="4">

                    <div class="sidebar">
                        <h2>与之相关</h2>

                        <div class="special_movies" v-for="sim in simmovie" :key="sim.id">
                            <div class="movie_poster">
                                <router-link :to="{path:'movieview',query: {movieId: sim.id}}" @click.native="getMovieDetails"><el-image :src="url"></el-image></router-link>
                            </div>
                            <div class="movie_desc">
                                <router-link :to="{path:'movieview',query: {movieId: sim.id}}" @click.native="getMovieDetails">{{sim.title}}</router-link>
                                <el-rate
                                v-model="sim.rating" 	
                                disabled
                                show-score
                                text-color="#ff9900"
                                score-template="{value}">
                                </el-rate>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                
                </el-col>
            </el-row> 
        </div>

        <div class="bottom">
            <div class="content">
               
                <div class="content_bottom">
                    <div class="heading">
                        <h3>热门电影</h3>
                    </div>
                </div>
                <div class="section group">
                    <div class="grid_1_of_5 images_1_of_5" v-for="hot in hotmovie" :key="hot.id">
                        <router-link :to="{path:'movieview',query: {movieId: hot.id}}" @click.native="getMovieDetails"><el-image :src="url"></el-image></router-link>
                        <router-link :to="{path:'movieview',query: {movieId: hot.id}}" @click.native="getMovieDetails">{{hot.title}}</router-link>
                    
                        <el-rate
                        v-model="hot.rating" 	
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}">
                        </el-rate>
                        
                    </div>
                </div>
            </div>
        </div>
         
    </div>
</template>

<script>
export default {
    created(){
        this.getMovieDetails();
        this.getHotMovie();
    },
    data(){
        return{
            url:require('../assets/images/end-game.jpg'),
            bigurl:require('../assets/images/1.jpg'),
            value:4.0,

            movieId:"",
            moviedetails:{},
            hotmovie:[
                {id: 1,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
                {id: 2,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
                {id: 3,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
                {id: 4,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
                {id: 5,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
            ],
            simmovie:[
                {id: 1,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
                {id: 2,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
                {id: 3,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
                {id: 4,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
                {id: 5,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
            ],
            count: 0
        }
    },
    methods:{
        async getMovieDetails(){ 
            const movieId=this.$route.query.movieId;
            this.movieId=movieId;
            let param = new URLSearchParams();
            param.append('movieId', this.movieId);
            const {data:result}=await this.$axios({
                method: 'post',
                url: 'movie/moviedetails',
                data: param
            });
            this.moviedetails=result;
        },
        async getHotMovie(){
            console.log(123456);
            const result=await this.$axios({
                method: 'get',
                url: 'movie/hotmovie',
            });
            console.log(result.data);
            this.hotmovie=result.data;
        },
        async submitRate(){
<<<<<<< HEAD
            const userId=window.sessionStorage.getItem("token");

=======
            // 获取用户ID
            const userId=window.sessionStorage.getItem("token");

            //获取时间戳
            var  date1 =new Date();
            const nowtime=Date.parse(date1)/1000

            //将数据存入param中好传到服务端
>>>>>>> movieView
            let param = new URLSearchParams();
            param.append('userId', userId);
            param.append('movieId', this.moviedetails.id);
            param.append('rating', this.value);
<<<<<<< HEAD
=======
            param.append('timeStamp',nowtime);
>>>>>>> movieView
            const {data:result}=await this.$axios({
                method: 'post',
                url: 'rating',
                data: param
            });

            //判断data中的内容是否为空，如果为空代表这个用户不存在。
            var arr = Object.keys(result);
            if(arr.length == 0){
                this.$message.success("评分失败，请重试");
                return;
            }
                
            this.$message.success("评分成功");
        }
    }
}
</script>

<style lang="less" scoped>

.movieview {
    padding-top: 1%;
	width:95%;
	margin: 0 auto;
	transition:all .2s linear;
	-moz-transition:all .2s linear;/* firefox */
	-webkit-transition:all .2s linear; /* safari and chrome */
	-o-transition:all .2s linear; /* opera */
	-ms-transition:all .2s linear;
}

// 底部的热门电影
.content {
	padding: 20px 0;
	background: #FFF;
}
.content_top{
	padding:10px 20px;
	border: 1px solid #EBE8E8;
	background: url(../assets/images/strip-bg.gif) repeat-x #F6F6F6;
}
.content_bottom {
	padding:10px 20px;
	border: 1px solid #EBE8E8;
	background: url(../assets/images/strip-bg.gif) repeat-x #F6F6F6;
    // margin-top: 2.6%;
    height: 30px;
}

.heading h3 {
	font-size:1.0em;
	color:#FC7D01;
    text-transform: uppercase;
    
}
.grid_1_of_5 {
	display: block;
	float: left;
	margin: 1% 0 1% 1.6%;
	box-shadow: 0px 0px 3px rgb(150, 150, 150);
	-webkit-box-shadow: 0px 0px 3px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 3px rgb(150, 150, 150);
	-o-box-shadow: 0px 0px 3px rgb(150, 150, 150);
}
.grid_1_of_5:first-child {
	margin-left: 0;
}
.images_1_of_5 {
	width: 15.72%;
	padding:1.5%; 
	text-align: center;
	position: relative;
}
.images_1_of_5  img {
	max-width: 100%;
}
.images_1_of_5  h2  a{
	color:#888;
	padding-top:2px;
}
.images_1_of_5  p {
	font-size: 0.8125em;
	padding: 0.4em 0;
	color: #333;
}
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}
.group:before, .group:after {
	content: "";
	display: table;
}
.group:after {
	clear: both;
}
.group {
	zoom: 1;
}

// 侧边栏

.sidebar h2{
	padding:10px 20px;
	border: 1px solid #EBE8E8;
	background: url(../assets/images/strip-bg.gif) repeat-x #F6F6F6;
	font-family: 'ambleregular';
	font-size:1.2em;
	color:#FC7D01;
	text-transform: uppercase;
}
.router-link  {
    text-decoration: none;
}
.special_movies{
	border: 1px solid #ECE9E9;
    margin-top:20px;
    height: 105px;	
}
.movie_poster {
    float: left;
    width: 33%;
}
.el-image {
	display:block;
	max-width:100%;
}
.movie_desc{
	float:left;
	width:50%;
	margin-left:5%;
	padding:10px;
}


</style>